<template>
    <div class="supplierArrears">
        <!-- 供应商欠款详情 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box">
            <el-button class="visitBtn" @click="" v-show="false"><i class="iconfont icon-daochu"></i>
                导出
            </el-button>
        </div>

        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
             @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            @updatePage="updatePage" @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData"
            :tableData="inventoryTableData">
        </forTableCom>
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import { querySupplierArrearsApi } from '@/api/inventory'
import { ref } from 'vue'
const idActive = 'warehouseId'
// 表单
let inventoryForm = ref(
    {
        supplierId: '',    // 供应商编号
        supplierName: '',   // 供应商名称
        contactPhone: '',    // 联系电话
        cooperativeStatus: '',    // 合作状态
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'supplierId',
        label: '供应商编号',
    },
    {
        name: 'supplierName',
        label: '供应商名称'
    },
    {
        name: 'contactPhone',
        label: '联系电话'
    },
    {
        name: 'cooperativeStatus',
        label: '合作状态'
    },
])

// 查找
const onSearch = (v) => {
    pageNum.value = 1
    querySupplierArrearsFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'supplierId',
        label: '供应商编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'supplierName',
        label: '供应商名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'supplierAddress',
        label: '供应商地址'
    },
    {
        prop: 'contactPhone',
        label: '联系电话'
    },
    {
        prop: 'productName',
        label: '存货名称',
        colorClassName: 'activeColor'

    },
    {
        prop: 'specs',
        label: '规格型号',
        colorClassName: 'activeColor'
    },
    // {
    //     prop: 'price',
    //     label: '单价',
    //     colorClassName: 'activeColor'

    // },
    {
        prop: 'debtMoney',
        label: '欠款金额',
        colorClassName: 'activeColor'

    },
    {
        prop: 'cooperativeStatus',
        label: '合作状态',
        colorClassName: 'activeColor'

    },
])
// 表格数据内容
let inventoryTableData = ref([
   
])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    let obj = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(obj,inventoryForm.value[0])
    querySupplierArrearsFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log('页面位置发生变化', v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log('条目个数发生变化', v);
}

// 查询供应商欠款详情
const querySupplierArrearsFn = async (data = '') => {
    let res = await querySupplierArrearsApi(data)
    let { code, rows, total } = res
    if (code == 200) {
        inventoryTableData.value = rows
        totals.value = total
    }
}

const getoutboundOrderData = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    querySupplierArrearsFn(params)
}
onMounted(() => {
    getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.supplierArrears {
    padding: 16px;

    .function-box {
        .create {
            color: #fff;
            background-color: #48C974;
        }

        .export {
            color: #fff;
            background-color: #F6A055
        }

        .delete {
            color: #fff;
            background-color: #F55126;
        }

        .print {
            color: #fff;
            background-color: #7966ED;
        }
    }
}
</style>
